<template>
	<view class="u-page fullpage flex flex-direction" :style="skin">
		<image :src="`${assetsPath}/mine/userCenter/bg1.png`" mode="widthFix" class="bg"></image>
		<view class="top-wrap">
			<zx-nav color="#FFFFFF" title="会员中心"></zx-nav>
			<view class="userinfo flex align-center ">
				<u-avatar :size="90" :src="userInfo.wx_img ? userInfo.wx_img : `${assetsPath}/defaultAvatar.png`"></u-avatar>
				<view class="ml24">
					<view class="name">{{ userInfo.wx_name ? userInfo.wx_name : '用户' + userInfo.id }}</view>
					<view>现在开通，即享专属优惠</view>
				</view>
			</view>
		</view>
		<view class="content flex-sub">
			<view class="vip-card">
				<image :src="`${assetsPath}/mine/userCenter/bg2.png`" mode="widthFix" class="vip-card-bg"></image>
				<view class="flex align-center justify-between">
					<view>
						<view class="title">PLUS会员</view>
						<view class="line"></view>
						<view class="sub-title">
							<text>每年可省</text>
							<text class="text-yellow">1万+</text>
						</view>
					</view>
					<view>
						<view>
							<text>低至 ¥</text>
							<text class="price">{{ minPrice }}</text>
							<text>/年</text>
						</view>
						<view class="btn" @tap="showDetails = true">立即开通</view>
					</view>
				</view>
				<view class="tip text-yellow" v-if="userInfo.green_card_end_time">会员到期日期{{userInfo.green_card_end_time}}</view>
			</view>
			<view class="vip-list">
				<view class="title">
					<text>尊享会员</text>
					<text class="u-primary">4</text>
					<text>大特权</text>
				</view>
				<view class="menu flex align-center justify-around">
					<view class="menu-item" v-for="(item, index) in menulist" :key="index">
						<view class="imgbox"><image :src="item.icon" mode="widthFix"></image></view>
						<view class="info">{{ item.text }}</view>
					</view>
				</view>
				<view class="power" v-for="(item, index) in powerlist" :key="index">
					<view class="tag">特权{{ index + 1 }}</view>
					<view class="title">{{ item.title }}</view>
					<view class="info">{{ item.text }}</view>
					<image :src="`${assetsPath}${item.icon}`" mode="widthFix" class="bg" :class="{ bgc: index > 0 }"></image>
				</view>
			</view>
		</view>
		<u-popup :show="showDetails" @close="showDetails = false" :round="10" closeable>
			<view class="modal">
				<view class="title">开通会员</view>
				<view class="pricelist flex justify-between mt55 mb60">
					<!-- <view class="item flex flex-direction align-center justify-center" :class="{ active: active == 0 }" @tap="active = 0">
						<view>
							<text class="price">222</text>
							<text>元</text>
						</view>
						<view>1年</view>
						<image :src="`${assetsPath}/mine/userCenter/selected.png`" mode="widthFix" class="thumb" v-if="active == 0"></image>
					</view> -->
					<view
						class="item flex flex-direction align-center justify-center"
						v-for="(item, index) in list"
						:key="index"
						:class="{ active: active == index }"
						@tap="active = index"
					>
						<view class="tag" v-if="item.top == 'on'">推荐</view>
						<view>
							<text class="price">{{ item.price }}</text>
							<text>元</text>
						</view>
						<view>{{ item.year }}年</view>
						<image :src="`${assetsPath}/mine/userCenter/selected.png`" mode="widthFix" class="thumb" v-if="active == index"></image>
					</view>
				</view>
				<mycheckbox class="checkbox " :state="isRead" @handChange="isRead = !isRead">
					<text class="ml24">勾选即代表您已同意</text>
					<navigator class="u-primary" @tap.stop="" url="/pages/article/details?id=4">《{{ appName }}会员开通规则》</navigator>
				</mycheckbox>
				<view class="mt40 ml50 mr50">
					<u-button @click="Opengreencard" :disabled="!isRead" type="success" shape="circle" :loading="btnLoading" text="确定支付"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import mycheckbox from '@/components/mycheckbox';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			showDetails: false,
			isRead: false,
			active: 1,
			btnLoading: false,
			menulist: [
				{
					icon: '/static/mine/userCenter/icon1.png',
					text: '享PLUS特惠价格'
				},
				{
					icon: '/static/mine/userCenter/icon2.png',
					text: '600元优惠券'
				},
				{
					icon: '/static/mine/userCenter/icon3.png',
					text: '会员日特惠'
				},
				{
					icon: '/static/mine/userCenter/icon4.png',
					text: '分享金高额返利'
				}
			],
			powerlist: [
				{
					icon: '/mine/userCenter/icon5.png',
					title: '部分商品享受PLUS特惠价格',
					text: '专属PLUS会员的品质好物 高品质，低价格。'
				},
				{
					icon: '/mine/userCenter/icon6.png',
					title: '每月送优惠券，全年送600元',
					text: '支持全平台店铺商品，任何商家店铺均可抵扣。'
				},
				{
					icon: '/mine/userCenter/icon7.png',
					title: '会员日特惠',
					text: '每月9日为PLUS会员日，下单即送任意花材。'
				},
				{
					icon: '/mine/userCenter/icon8.png',
					title: '享高额返佣政策',
					text: '成功邀请好友下单即可获得高额返利。'
				}
			],
			list: []
		};
	},
	components: { mycheckbox },
	computed: {
		...mapState(['userInfo']),
		minPrice() {
			if (this.list && this.list.length > 0) {
				let pricelist = this.list.map(item => item.price);
				return pricelist.slice(0).sort(function(a, b) {
					return a - b;
				})[0];
			}
			return 0;
		}
	},
	created() {
		this.getGreencardPrice();
	},
	methods: {
		...mapActions(['getUserInfo']),
		getGreencardPrice() {
			this.$postAction(this.$api.getGreencardPrice).then(da => {
				if (da.code == 0) {
					this.list = da.data.map((item, index) => {
						item.year = item.day / 365;
						if (item.top == 'on') {
							this.active = index;
						}
						return item;
					});
				}
			});
		},
		Opengreencard() {
			this.btnLoading = true;
			let $me = this;
			this.$postAction(this.$api.Opengreencard, { price: this.list[this.active].price })
				.then(da => {
					if (da.code == 0) {
						let payInfo = da.data;
						//微信支付
						if (!payInfo) {
							return false;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,
							service: 3,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '开通PLUS会员成功'
								});
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/mine/mine'
									});
								}, 200);
								$me.getUserInfo();
							},

							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '订单支付失败'
								});
							}
						});
					}
				})
				.finally(() => {
					this.btnLoading = false;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.bg {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
}
.top-wrap {
	position: relative;
	z-index: 99;

	.userinfo {
		margin: 68upx 28upx 0;
		color: #ffda00;
		font-size: 24upx;
		line-height: 33upx;
		.name {
			color: #fff;
			font-size: 32upx;
			font-weight: 500;
			line-height: 45upx;
		}
	}
}
.content {
	background: #f4f4f4;
	border-radius: 48upx 48upx 0 0;
	margin-top: 116upx;
	position: relative;
	z-index: 99;
	.vip-card {
		position: relative;
		top: -77upx;
		width: 722upx;
		height: 285upx;
		margin: 0 auto;
		.vip-card-bg {
			display: block;
			width: 100%;
		}
		& > view {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 30upx;
			color: #fff;
			padding: 0 66upx;
			font-size: 26upx;
			font-weight: 600;
		}
		.title {
			line-height: 62upx;
			font-size: 44upx;
		}
		.line {
			width: 179upx;
			height: 5upx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.57) 0%, rgba(44, 54, 100, 0) 100%);
			border-radius: 3upx;
			margin: 8upx 0 19upx;
		}
		.sub-title {
			font-size: 32upx;
		}
		.text-yellow {
			color: #ffda00;
		}
		.price {
			font-size: 44upx;
			margin-left: 10upx;
		}
		.btn {
			width: 175upx;
			height: 63upx;
			background: #ffda00;
			border-radius: 36upx;
			color: #2c3664;
			margin: 20upx auto 0;
			text-align: center;
			line-height: 63upx;
		}
		.tip{
			position: absolute;
			bottom: 50upx;
			left: 0;
			top: auto;
		}
	}
	.menu {
		.menu-item {
			width: 120upx;
			text-align: center;
			.imgbox {
				display: block;
				width: 120upx;
				height: 120upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.info {
				width: 100%;
				font-size: 28upx;
				font-weight: 500;
				color: #2c3664;
				line-height: 40upx;
				text-align: center;
				margin-top: 16upx;
			}
		}
	}
	.vip-list {
		position: absolute;
		top: 220upx;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
		padding: 0 28upx;
		.power {
			position: relative;
			background: #fff;
			border-radius: 12upx;
			margin-top: 51upx;
			padding: 49upx 30upx 35upx;
			height: 310upx;
			.tag {
				width: 98upx;
				height: 42upx;
				background: linear-gradient(135deg, #4c5da9 0%, #2c3664 100%);
				border-radius: 8upx;
				font-size: 24upx;
				font-weight: 500;
				color: #ffffff;
				line-height: 42upx;
				text-align: center;
				position: absolute;
				left: 35upx;
				top: -21upx;
			}
			.title {
				color: #1c1c1e;
				font-size: 32upx;
				line-height: 45upx;
				margin-bottom: 60upx;
				font-weight: 500;
			}
			.info {
				width: 300upx;
				font-size: 26upx;
				line-height: 44upx;
				color: #636366;
			}
			.bg {
				position: absolute;
				bottom: 35upx;
				left: 30upx;
				width: 633upx;
				&.bgc {
					background: linear-gradient(90deg, rgba(76, 93, 169, 0) 0%, rgba(44, 54, 100, 0.1) 100%);
				}
			}
		}
	}
}
.modal {
	padding: 32upx 43upx 49upx;
	.title {
		font-weight: 600;
		font-size: 32upx;
		line-height: 45upx;
		text-align: center;
	}
	.pricelist {
		.item {
			width: 323upx;
			height: 196upx;
			background: #ffffff;
			border-radius: 8upx;
			border: 1px solid #979797;
			color: #000000;
			font-weight: 600;
			font-size: 32upx;
			position: relative;
			&.active {
				color: var(--nav-bg);
				border: 3upx solid var(--nav-bg);
			}
			.thumb {
				display: block;
				height: 72upx;
				width: 72upx;
				position: absolute;
				right: -1upx;
				bottom: -1upx;
			}
			.tag {
				width: 98upx;
				height: 42upx;
				background: linear-gradient(135deg, #4c5da9 0%, #2c3664 100%);
				border-radius: 8upx;
				color: #fff;
				font-weight: 500;
				font-size: 24upx;
				text-align: center;
				line-height: 42upx;
				position: absolute;
				top: -18upx;
				left: 14upx;
			}
			.price {
				font-size: 44upx;
			}
		}
	}
}
</style>
